<template>
  <w-modal ref="WModal" :title="title" :width="width" @ok="okClick">
    <a-input v-model="inputText" :placeholder="placeholder" type="textarea" />
    <slot />
  </w-modal>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import WModal, { ModalComType } from '../index'

@Component({
  name: 'ComGlobalInputModel',
  components: {
    WModal
  }
})
export default class InputModal extends Vue {
  @Prop({ default: '' }) title!: string
  @Prop({ default: '请输入图片链接' }) placeholder!: string
  @Prop({ default: '' }) initData!: string
  @Prop({ type: Function, default: () => (null) }) validate!: Function
  @Prop({ type: Boolean, default: true }) required!: boolean
  @Prop({ type: String, default: '请输入' }) requiredMsg!: string
  @Prop({ type: Boolean, default: true }) autoClose!: boolean
  @Prop({ type: String, default: '700px' }) width!: string

  inputText = ''

  show () {
    this.inputText = this.initData;
    (this.$refs.WModal as ModalComType).show()
  }

  okClick () {
    if (this.required && !this.inputText) {
      this.$message.error(this.requiredMsg)
      return
    }
    const msg = this.validate(this.inputText)
    if (msg) {
      this.$message.error(msg)
    } else {
      this.$emit('success', this.inputText)
      if (this.autoClose) {
        (this.$refs.WModal as ModalComType).close()
      }
    }
  }
}
</script>

<style scoped>

</style>
